<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">

    <fieldset class="layui-elem-field layui-field-title">
        <legend>专辑添加</legend>
        <div class="layui-field-box">
            <div class="layui-col-md6">
                <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                    <div class="layui-form-item">
                        <img class="layui-upload-img" id="ID-upload-demo-img"
                             style="width:92px;height: 92px;border: 1px solid rgba(0,0,0,0.1)">
                    </div>
                    <!--表单控件项：文件上传（专辑封面）-->
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-normal" type="button" id="btnMusic">
                            <i class="layui-icon layui-icon-upload"></i>
                            选择封面图
                        </button>
                    </div>
                    <!--表单控件项：专辑名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">专辑名:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="name" id="musicname" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入专辑名">
                        </div>
                    </div>
                    <!--表单控件项：专辑名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">唱片公司:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="company" id="company" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入唱片公司">
                        </div>
                        <label class="layui-form-label">发行时间:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="releasedate" id="releasedate">
                        </div>
                    </div>
                    <!--表单控件项：语种-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">语种:</label>
                        <div class="layui-input-inline">
                            <select name="language" id="style">
                                <option value="国语">国语</option>
                                <option value="粤语">粤语</option>
                                <option value="闽南语">闽南语</option>
                                <option value="英语">英语</option>
                                <option value="日语">日语</option>
                                <option value="韩语">韩语</option>
                                <option value="法语">法语</option>
                                <option value="德语">德语</option>
                                <option value="俄语">俄语</option>
                                <option value="阿拉伯语">阿拉伯语</option>
                                <option value="纯音乐">纯音乐</option>
                            </select>
                        </div>
                        <label class="layui-form-label">歌手:</label>
                        <div class="layui-input-inline">
                            <select name="sid" id="sid" lay-search="">
                                <option value="0">匿名</option>
                            </select>
                        </div>
                    </div>
                    <!-- 专辑介绍    -->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">简介:</label>
                        <div class="layui-input-block">
                            <textarea name="summary" class="layui-textarea" placeholder="请填写专辑简介"></textarea>
                        </div>
                    </div>
                    <!-- 提交按钮    -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit id="addMusic">确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    // 获取URL参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURIComponent(r[2]);
        return null;
    }
    
    var albumId = getQueryString('id');
    var isEditMode = !!albumId;

    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;
        //日期组件
        var laydate = layui.laydate;

        // 渲染日期组件
        laydate.render({
            elem: '#releasedate'
        });

        // 初始化文件上传组件
        var uploadInst = upload.render({
            elem: '#btnMusic',
            url: '/upload/img',
            auto: true,  /*允许文件选择完成之后自动上传*/
            field: 'myfile',  /*设置文件域字段名，后端接口可以根据该字段名得到文件*/
            accept: 'file', /*设置允许上传的文件类型*/
            acceptMime: 'image/*', /*打开文件筛选框时过滤所需的文件（图片）*/
            before: function(obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });
                layer.load(); //上传loading
            },
            done: function(res) {
                // 上传成功
                layer.closeAll('loading');
                if (res && res.code === 0 && res.data) {
                    // 存储图片路径到隐藏字段
                    if (!$('#imgPath').length) {
                        $('#formMusic').append('<input type="hidden" id="imgPath" name="coverImg" value="" />');
                    }
                    $('#imgPath').val(res.data.src);
                    layer.msg('上传成功');
                } else {
                    layer.msg(res && res.msg || '上传失败');
                }
            },
            error: function(xhr, status, error) {
                // 请求异常回调
                console.error('上传错误:', error);
                layer.closeAll('loading');
                layer.msg('上传失败，请检查网络连接或重试');
            }
        });
        
        // 加载歌手列表
        $.get('/singer/list', function(res) {
            var html = '<option value="0">匿名</option>';
            if (res.code === 0 && res.data && res.data.length > 0) {
                res.data.forEach(function(singer) {
                    html += '<option value="' + singer.id + '">' + singer.name + '</option>';
                });
            }
            $('#sid').html(html);
            form.render('select');
            
            // 如果是编辑模式，加载专辑数据
            if (isEditMode) {
                loadAlbumData();
            }
        });
        
        // 加载专辑数据（编辑模式）
        function loadAlbumData() {
            console.log('正在加载专辑数据，ID:', albumId);
            
            // 创建隐藏字段用于存储图片路径
            if (!$('#imgPath').length) {
                $('#formMusic').append('<input type="hidden" id="imgPath" name="coverImg" value="" />');
            }
            
            $.ajax({
                url: '/album/get',
                type: 'get',
                data: { id: albumId },
                dataType: 'json',
                success: function(res) {
                    console.log('专辑数据响应:', res);
                    if (res && res.code === 0 && res.data) {
                        var album = res.data;
                        // 更改标题
                        $('.layui-field-title legend').text('专辑编辑');
                        $('#addMusic').text('确认修改');
                        
                        // 填充表单数据
                        $('#musicname').val(album.name || '');
                        $('#company').val(album.company || '');
                        $('#releasedate').val(album.releaseDate || '');
                        $('#style').val(album.language || '国语');
                        $('#sid').val(album.sid || 0);
                        $('textarea[name="summary"]').val(album.summary || '');
                        
                        // 如果有专辑封面图，显示它
                        if (album.coverImg) {
                            $('#ID-upload-demo-img').attr('src', album.coverImg);
                            $('#imgPath').val(album.coverImg);
                        } else {
                            // 设置默认封面图
                            $('#ID-upload-demo-img').attr('src', '../res/img/default_cover.jpg');
                        }
                        
                        // 添加隐藏字段保存专辑ID
                        if (!$('#albumId').length) {
                            $('#formMusic').append('<input type="hidden" id="albumId" name="id" value="' + album.id + '">');
                        }
                        
                        form.render();
                        console.log('专辑数据加载成功');
                    } else {
                        console.error('专辑数据加载失败，响应:', res);
                        
                        // 如果/album/get接口失败，尝试使用/album/detail接口
                        $.get('/album/detail', { id: albumId }, function(res2) {
                            console.log('备用接口响应:', res2);
                            if (res2 && res2.code === 0 && res2.data) {
                                var album = res2.data;
                                // 更改标题
                                $('.layui-field-title legend').text('专辑编辑');
                                $('#addMusic').text('确认修改');
                                
                                // 填充表单数据
                                $('#musicname').val(album.name || '');
                                $('#company').val(album.company || '');
                                $('#releasedate').val(album.releaseDate || '');
                                $('#style').val(album.language || '国语');
                                $('#sid').val(album.sid || 0);
                                $('textarea[name="summary"]').val(album.summary || '');
                                
                                // 如果有专辑封面图，显示它
                                if (album.coverImg) {
                                    $('#ID-upload-demo-img').attr('src', album.coverImg);
                                    $('#imgPath').val(album.coverImg);
                                } else {
                                    // 设置默认封面图
                                    $('#ID-upload-demo-img').attr('src', '../res/img/default_cover.jpg');
                                }
                                
                                // 添加隐藏字段保存专辑ID
                                if (!$('#albumId').length) {
                                    $('#formMusic').append('<input type="hidden" id="albumId" name="id" value="' + album.id + '">');
                                }
                                
                                form.render();
                            } else {
                                layer.msg('获取专辑信息失败', {icon: 2});
                            }
                        }).fail(function() {
                            layer.msg('获取专辑信息失败，请稍后重试', {icon: 2});
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('请求专辑数据时发生错误:', error);
                    layer.msg('网络错误，无法加载专辑信息', {icon: 2});
                }
            });
        }
        
        // 表单提交事件
        $('#addMusic').on('click', function() {
            // 验证表单
            if (!$('#musicname').val()) {
                layer.msg('请输入专辑名', {icon: 2});
                return;
            }
            
            // 准备数据
            var data = {
                name: $('#musicname').val(),
                company: $('#company').val(),
                releaseDate: $('#releasedate').val(),
                language: $('#style').val(),
                sid: $('#sid').val(),
                summary: $('textarea[name="summary"]').val()
            };
            
            // 添加图片路径（如果存在）
            var imgPath = $('#imgPath').val();
            if (imgPath) {
                data.img = imgPath;
            }
            
            // 如果是编辑模式，添加ID
            if (isEditMode) {
                data.id = albumId;
            }
            
            // 提交表单
            $.ajax({
                type: isEditMode ? 'put' : 'post',
                url: isEditMode ? '/album/update' : '/album/add',
                data: JSON.stringify(data),
                contentType: 'application/json;charset=utf-8',
                success: function(res) {
                    console.log('提交结果:', res);
                    if (res && res.code === 0) {
                        layer.msg(isEditMode ? '修改成功' : '添加成功', {icon: 1});
                        // 关闭当前窗口并刷新父页面
                        setTimeout(function() {
                            // 关闭当前iframe窗口
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            
                            // 刷新父页面的专辑列表
                            if (parent.layui && parent.layui.table) {
                                var table = parent.layui.table;
                                // 假设专辑列表表格ID是ablumlist
                                table.reload('ablumlist', {});
                            }
                        }, 1500);
                    } else {
                        layer.msg(res && res.msg || (isEditMode ? '修改失败' : '添加失败'), {icon: 2});
                    }
                },
                error: function(xhr, status, error) {
                    console.error('提交错误:', error);
                    layer.msg('服务器错误', {icon: 2});
                }
            });
        });
    })
</script>
</body>
</html>